/**
 * Map类     地图类
 * @row      行属性
 * @col      列属性
 * @width    宽度属性
 * @height   高度属性
 **/
function Map(row, col, width, height) {
    // 接收数据
    this.row = row;
    this.col = col;
    this.width = width;
    this.height = height;
    // 定义最外层的容器元素
    this.dom = document.createElement('div');
    // 设置类名
    this.dom.className = 'box';
    // 创建数组
    this.arr = [];
}

// 定义渲染方法
Map.prototype.fill = function() {
    // 创建20行 并填充完毕
    for (var j = 0; j < this.row; j++) {
        // 创建行容器
        var row_dom = document.createElement('div');
        // 设置类名
        row_dom.className = 'row';
        // 创建行数组
        var row_arr = [];

        // 遍历将行容器填满
        for (var i = 0; i < this.col; i++) {
            // 创建列容器
            var col_dom = document.createElement('span');

            // 追加元素
            row_dom.appendChild(col_dom);
            // 追加到行数组中
            row_arr.push(col_dom);

        }

        // 将填满之后的行容器 追加到dom中
        this.dom.appendChild(row_dom);
        // 将填满之后的行数组 追加到最外层的数组中
        this.arr.push(row_arr);
    }

    // 上树
    document.body.appendChild(this.dom);
}


// 清屏
Map.prototype.clear = function() {
    // 遍历数组
    for (var i = 0; i < this.arr.length; i++) {
        // 遍历内部的每一个行数组
        for (var j = 0; j < this.arr[i].length; j++) {
            // 改变元素的背景颜色
            this.arr[i][j].style.backgroundColor = '';
            this.arr[i][j].style.backgroundImage = '';
        }
    }
}